<template>
    <view>
        <!-- 地址 -->
        <navigator url="../../pagesU/address/address?source=1" class="address-section">
            <view class="order-content">
                <text class="yticon icon-shouhuodizhi"></text>
                <view class="cen" v-if="addressData">
                    <view class="top">
                        <text class="name">{{ addressData.name }}</text>
                        <text class="mobile">{{ addressData.phoneNumber }}</text>
                    </view>
                    <text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text>
                </view>
				<view class="cen" v-else>
					<text>请设置收货地址</text>
				   <!-- <view class="top">
				        <text class="name">{{ addressData.name }}</text>
				        <text class="mobile">{{ addressData.phoneNumber }}</text>
				    </view>
				    <text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text> -->
				</view>
                <text class="yticon icon-you"></text>
            </view>

            <image
                    class="a-bg"
                    src=""
            ></image>
        </navigator>

        <view class="goods-section">
            <view class="g-header b-b">
            <image class="logo"
                                   src="http://yjlive160322.oss-cn-beijing.aliyuncs.com/mall/images/20190807/QQ%E5%9B%BE%E7%89%8720190807191952.jpg"></image>
                            <text class="name">mallplus多租户商城</text>
                <text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
            </view>
            <!-- 商品列表 -->
            <view class="g-item" v-for="(item, index) in cartPromotionItemList" :key="index">
                <image :src="item.productPic"></image>
                <view class="right">
                    <text class="title clamp">{{ item.productName }}</text>
                    <text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
                    <view class="price-box">
                        <text class="price">￥{{ item.price }}</text>
                        <text class="number">x {{ item.quantity }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="hot-floor" v-if="item1.giftsList && item1.giftsList.length > 0" v-for="(item1, index1) in basicGiftsList" :key="index1">
            <view class="floor-img-box"> <text class="name">{{ item1.name }}</text></view>

            <scroll-view class="floor-list" scroll-x>
                <view class="scoll-wrapper">
                    <view v-for="(item, index) in item1.giftsList" :key="index" class="floor-item" >
                        <image :src="item.pic" mode="aspectFill"></image>
                        <text class="title clamp">{{ item.name }}</text>
                        <text class="price" v-if="item.rule">￥{{ item.price }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 优惠明细 -->
        <view class="yt-list">
            <view class="yt-list-cell b-b" v-if="couponList.length > 0" @click="toggleMask('show')">
                <view class="cell-icon">券</view>
                <text class="cell-tit clamp">优惠券</text>
                <text class="cell-tip active">选择优惠券</text>
                <text class="cell-more wanjia wanjia-gengduo-d"></text>
            </view>
            <view class="yt-list-cell b-b" v-if="coupon">
                <text class="cell-tit clamp">商家促销</text>
                <view class="cell-tip hb" v-if="coupon.minPoint">满{{coupon.minPoint}}减{{coupon.amount}}</view>
                <text class="cell-tip disabled"  v-if="!coupon">暂无可用优惠</text>
            </view>
        </view>
        <!-- 金额明细 -->
        <view class="yt-list">
            <view class="yt-list-cell b-b">
                <text class="cell-tit clamp">商品金额</text>
                <text class="cell-tip">￥{{ calcAmount.totalAmount }}</text>
            </view>
            <view class="yt-list-cell b-b" v-if="groupActivity">
                <text class="cell-tit clamp">活动金额</text>
                <text class="cell-tip">￥{{ groupActivity.price }}</text>
            </view>
            <view class="yt-list-cell b-b" v-if="calcAmount.promotionAmount>0">
                <text class="cell-tit clamp">优惠金额</text>
                <text class="cell-tip red">-￥{{ calcAmount.promotionAmount }}</text>
            </view>
             <view class="yt-list-cell b-b" v-if="coupon.amount>0">
                            <text class="cell-tit clamp">优惠券抵扣</text>
                            <text class="cell-tip red">-￥{{ coupon.amount }}</text>
                        </view>

            <view class="yt-list-cell b-b">
                <text class="cell-tit clamp">运费</text>
                <text class="cell-tip">{{calcAmount.freightAmount}}</text>
            </view>
            <view class="yt-list-cell desc-cell">
                <text class="cell-tit clamp">备注</text>
                <input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
            </view>
        </view>

        <!-- 底部 -->
        <view class="footer">
            <view class="price-content">
                <text>实付款</text>
                <text class="price-tip">￥</text>
                <text class="price">{{ (calcAmount.payAmount-coupon.amount)>0?(calcAmount.payAmount-coupon.amount):0.01 }}</text>
            </view>
            <text class="submit" @click="submit">提交订单</text>
        </view>

        <!-- 优惠券面板 -->
        <view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
            <view class="mask-content" @click.stop.prevent="stopPrevent">
                <!-- 优惠券页面，仿mt -->
                <view class="coupon-item" v-if="couponList.length > 0" v-for="(item, index) in couponList" :key="index">
                    <view class="con" @click="selectCoupon(item)">
                        <view class="left">
                            <text class="title">{{ item.name }}</text>
                            <text class="time">有效期至{{item.coupon.endTime | formatCreateTime}}</text>
                        </view>
                        <view class="right">
                            <text class="price">{{ item.coupon.amount }}</text>
                            <text>满{{item.coupon.minPoint}}可用</text>
                        </view>

                        <view class="circle l"></view>
                        <view class="circle r"></view>
                    </view>
                    <text class="tips">限新用户使用</text>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
    import { mapState } from 'vuex';
    	import { formatDate } from '@/common/date';

    export default {
    components: {
    		mallplusCopyright
    	},
        data() {
            return {
                maskState: 0, //优惠券面板显示状态
                desc: '', //备注
                payType: 1, //1微信 2支付宝
                type: 1,
                groupType: '',
                memberIntegration:0,
                groupActivityId:'',
                basicGiftsVar:'',
                skillId:0,
                goodsId: 0,
                skuId:0,
                mgId: 0,
                cartId: '',
                cartIds: '',
                addressId: '',
                couponId: '',
                memberCouponId:'',
                coupon:{
                    amount:0,
                    coupon:{
                        amount:0
                    }
                },
                groupActivity:null,
                memberReceiveAddressList: [],
                basicGiftsList:[],
                cartPromotionItemList: [],
                calcAmount: {
                    totalAmount: 0,
                    freightAmount: 0,
                    promotionAmount: 0,
                    payAmount: 0
                },
                couponList: [],
                addressData: {
                    name: null,
                    phoneNumber: '',
                    detailAddress: '',
                    region: ''
                }
            };
        },
        async onLoad(opt) {
            let option = JSON.parse(opt.dataJson);
            console.log(option)
            this.skuId = option.skuId==undefined?'':option.skuId;
             this.goodsId = option.goodsId;

            let data;
            this.type = option.type;
            if (option.groupActivityId) { // 团购
                let params = { groupId: option.groupActivityId };
                data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
                this.groupActivityId=option.groupActivityId;
                this.groupActivity=data.groupActivity;
                this.type = 1;
            }else{
                if (option.groupType) { // 拼团
                    this.groupType = option.groupType;
                    this.goodsId = option.id;
                    this.mgId = option.mgid;

                    this.groupId = option.groupId;
                    if (this.skuId) {
                        let params = { orderType:2, groupId: option.groupId, goodsId: option.id, skuId: this.skuId };
                        data = await Api.apiCall('post', Api.order.addGroup, params);
                    } else {
                        let params = { orderType:2, groupId: option.groupId, goodsId: option.id };
                        data = await Api.apiCall('post', Api.order.addGroup, params);
                    }
                } else {
                    if (option.type == 1) { // 详情
                        this.cartId = option.id;
                        let params = { goodsId: option.goodsId,skuId: this.skuId, type: option.type };
                        data = await Api.apiCall('get', Api.order.preOrder, params);
                    } else if (option.type == 2) { // 购物车
                        let params = { cartIds: option.cartIds, type: option.type };
                        data = await Api.apiCall('get', Api.order.preOrder, params);
                        this.cartIds = option.cartIds;
                    }else if (option.type == 6) { // 秒杀
                        let params = { skillId: option.skillId, type: option.type };
                        data = await Api.apiCall('get', Api.order.preOrder, params);
                        this.skillId = option.skillId;
                    }
                }

            }
            if (!data || !data.cartPromotionItemList){
                uni.switchTab({
                    url: '/pages/index/index'
                });
            }

            this.basicGiftsList = data.basicGiftsList;

            if (this.basicGiftsList) {
                let basicGiftsVar ='';
                let basicGiftsVar1 ='';
                this.basicGiftsList.forEach(item => {
                    basicGiftsVar1=basicGiftsVar1+item.id+':';
                    console.log('1='+item.giftsList);
                    if (item.giftsList ) {
                        item.giftsList.forEach(item1 => {
                            basicGiftsVar1 = basicGiftsVar1 + item1.id + ',';
                        });
                    }
                    basicGiftsVar=basicGiftsVar+basicGiftsVar1.substr(0, basicGiftsVar1.length - 1)+'@';
                    basicGiftsVar1='';
                });
                this.basicGiftsVar=basicGiftsVar.substr(0, basicGiftsVar.length - 1);
                console.log(this.basicGiftsVar);
            }
            this.cartPromotionItemList = data.cartPromotionItemList;
            this.calcAmount = data.calcAmount;
            this.addressData = data.address;
            if (this.addressData) {
                this.addressId = this.addressData.id;
            }

            this.couponList = data.couponHistoryDetailList;
            this.memberReceiveAddressList = data.memberReceiveAddressListaddress;

        },
        computed: {
            ...mapState([ 'userInfo'])
        },
        filters: {
                      formatCreateTime(time) {
                        let date = new Date(time);
                        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
                      },
                    },
        methods: {
        getSource(){
                  let source =Api.source;
                 return source;
        },
            selectCoupon(item){
                this.coupon=item.coupon;
                this.couponId= item.couponId;
                this.memberCouponId=item.id;
                console.log(this.coupon);
                this.toggleMask();
            },
            //显示优惠券面板
            toggleMask(type) {
                let timer = type === 'show' ? 10 : 300;
                let state = type === 'show' ? 1 : 0;
                this.maskState = 2;
                setTimeout(() => {
                    this.maskState = state;
                }, timer);
            },
            numberChange(data) {
                this.number = data.number;
            },
            changePayType(type) {
                this.payType = type;
            },
            async submit() {
                console.log('dubmit')
                let data;
                if (!this.addressId) {
                    this.$api.msg('请选择收货地址');
                    return;
                }
                let params = {};

                // 拼团
                if (this.groupType) {
                    if (!this.mgId) {
                        this.mgId = 1;
                    }

                     params = {
                        mgId: this.mgId,
                        groupType: this.groupType,
                        type: 1,
                        orderType:2,
                          skuId: this.skuId,
                        goodsId: this.goodsId,
                        groupId: this.groupId,
                        addressId: this.addressId,
                        couponId: this.couponId,
                        memberCouponId: this.memberCouponId,
                        content: this.desc
                    };
                     params.source = this.getSource();
                    data = await Api.apiCall('post', Api.order.acceptGroup, params);
                } else {
                    // detail
                    if (this.type == 1) {
                         params = {basicGiftsVar:this.basicGiftsVar,orderType:1, type: 1, goodsId: this.goodsId,skuId: this.skuId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
                        if (this.groupActivityId) {
                            params = {groupActivityId:this.groupActivityId,orderType:3, type: 1, goodsId: this.goodsId,skuId: this.skuId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
                        }
                        params.source = this.getSource();
                        data = await Api.apiCall('post', Api.order.bookOrder, params);
                    }
                    // 购物车
                    if (this.type == 2) {
                         params = {orderType:1, type: 2, cartIds: this.cartIds, addressId: this.addressId, couponId: this.couponId, content: this.desc };
                        params.source = this.getSource();
                        data = await Api.apiCall('post', Api.order.bookOrder, params);
                    }

                    // 秒杀
                    if (this.type == 6) {
                         params = { type: 6, skillId: this.skillId, addressId: this.addressId, couponId: this.couponId, content: this.desc ,orderType:6};
                        params.source = this.getSource();
                        data = await Api.apiCall('post', Api.order.bookOrder, params);
                    }
                }

                if (data && data.order) {
                    let id = data.order.id;
                   // let url = `/pages/money/pay?id=${id}`;
                    let url = '/pages/order/payment/index?order_id=' + data.order.id + '&type=1' ;

                    uni.navigateTo({
                        url: url
                    });
                } else {
                    this.$api.msg(data);
                }
            },
            stopPrevent() {}
        }
    };
</script>

<style lang="scss">
    page {
        background: $page-color-base;
        padding-bottom: 100upx;
    }

    .address-section {
        padding: 30upx 0;
        background: #fff;
        position: relative;

        .order-content {
            display: flex;
            align-items: center;
        }

        .icon-shouhuodizhi {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90upx;
            color: #888;
            font-size: 44upx;
        }

        .cen {
            display: flex;
            flex-direction: column;
            flex: 1;
            font-size: 28upx;
            color: $font-color-dark;
        }

        .name {
            font-size: 34upx;
            margin-right: 24upx;
        }

        .address {
            margin-top: 16upx;
            margin-right: 20upx;
            color: $font-color-light;
        }

        .icon-you {
            font-size: 32upx;
            color: $font-color-light;
            margin-right: 30upx;
        }

        .a-bg {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 5upx;
        }
    }

    .goods-section {
        margin-top: 16upx;
        background: #fff;
        padding-bottom: 1px;

        .g-header {
            display: flex;
            align-items: center;
            height: 84upx;
            padding: 0 30upx;
            position: relative;
        }

        .logo {
            display: block;
            width: 50upx;
            height: 50upx;
            border-radius: 100px;
        }

        .name {
            font-size: 30upx;
            color: $font-color-base;
            margin-left: 24upx;
        }

        .g-item {
            display: flex;
            margin: 20upx 30upx;

            image {
                flex-shrink: 0;
                display: block;
                width: 140upx;
                height: 140upx;
                border-radius: 4upx;
            }

            .right {
                flex: 1;
                padding-left: 24upx;
                overflow: hidden;
            }

            .title {
                font-size: 30upx;
                color: $font-color-dark;
            }

            .spec {
                font-size: 26upx;
                color: $font-color-light;
            }

            .price-box {
                display: flex;
                align-items: center;
                font-size: 32upx;
                color: $font-color-dark;
                padding-top: 10upx;

                .price {
                    margin-bottom: 4upx;
                }
                .number {
                    font-size: 26upx;
                    color: $font-color-base;
                    margin-left: 20upx;
                }
            }

            .step-box {
                position: relative;
            }
        }
    }
    .yt-list {
        margin-top: 16upx;
        background: #fff;
    }

    .yt-list-cell {
        display: flex;
        align-items: center;
        padding: 10upx 30upx 10upx 40upx;
        line-height: 70upx;
        position: relative;

        &.cell-hover {
            background: #fafafa;
        }

        &.b-b:after {
            left: 30upx;
        }

        .cell-icon {
            height: 32upx;
            width: 32upx;
            font-size: 22upx;
            color: #fff;
            text-align: center;
            line-height: 32upx;
            background: #f85e52;
            border-radius: 4upx;
            margin-right: 12upx;

            &.hb {
                background: #ffaa0e;
            }

            &.lpk {
                background: #3ab54a;
            }
        }

        .cell-more {
            align-self: center;
            font-size: 24upx;
            color: $font-color-light;
            margin-left: 8upx;
            margin-right: -10upx;
        }

        .cell-tit {
            flex: 1;
            font-size: 26upx;
            color: $font-color-light;
            margin-right: 10upx;
        }

        .cell-tip {
            font-size: 26upx;
            color: $font-color-dark;

            &.disabled {
                color: $font-color-light;
            }

            &.active {
                color: $base-color;
            }
            &.red {
                color: $base-color;
            }
        }

        &.desc-cell {
            .cell-tit {
                max-width: 90upx;
            }
        }

        .desc {
            flex: 1;
            font-size: $font-base;
            color: $font-color-dark;
        }
    }

    /* 支付列表 */
    .pay-list {
        padding-left: 40upx;
        margin-top: 16upx;
        background: #fff;
        .pay-item {
            display: flex;
            align-items: center;
            padding-right: 20upx;
            line-height: 1;
            height: 110upx;
            position: relative;
        }
        .icon-weixinzhifu {
            width: 80upx;
            font-size: 40upx;
            color: #6bcc03;
        }
        .icon-alipay {
            width: 80upx;
            font-size: 40upx;
            color: #06b4fd;
        }
        .icon-xuanzhong2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60upx;
            height: 60upx;
            font-size: 40upx;
            color: $base-color;
        }
        .tit {
            font-size: 32upx;
            color: $font-color-dark;
            flex: 1;
        }
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 995;
        display: flex;
        align-items: center;
        width: 100%;
        height: 90upx;
        justify-content: space-between;
        font-size: 30upx;
        background-color: #fff;
        z-index: 998;
        color: $font-color-base;
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        .price-content {
            padding-left: 30upx;
        }
        .price-tip {
            color: $base-color;
            margin-left: 8upx;
        }
        .price {
            font-size: 36upx;
            color: $base-color;
        }
        .submit {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 280upx;
            height: 100%;
            color: #fff;
            font-size: 32upx;
            background-color: $base-color;
        }
    }

    /* 优惠券面板 */
    .mask {
        display: flex;
        align-items: flex-end;
        position: fixed;
        left: 0;
        top: var(--window-top);
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 9995;
        transition: 0.3s;

        .mask-content {
            width: 100%;
            min-height: 30vh;
            max-height: 70vh;
            background: #f3f3f3;
            transform: translateY(100%);
            transition: 0.3s;
            overflow-y: scroll;
        }
        &.none {
            display: none;
        }
        &.show {
            background: rgba(0, 0, 0, 0.4);

            .mask-content {
                transform: translateY(0);
            }
        }
    }

    /* 优惠券列表 */
    .coupon-item {
        display: flex;
        flex-direction: column;
        margin: 20upx 24upx;
        background: #fff;
        .con {
            display: flex;
            align-items: center;
            position: relative;
            height: 120upx;
            padding: 0 30upx;
            &:after {
                position: absolute;
                left: 0;
                bottom: 0;
                content: '';
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #f3f3f3;
                transform: scaleY(50%);
            }
        }
        .left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            overflow: hidden;
            height: 100upx;
        }
        .title {
            font-size: 32upx;
            color: $font-color-dark;
            margin-bottom: 10upx;
        }
        .time {
            font-size: 24upx;
            color: $font-color-light;
        }
        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 26upx;
            color: $font-color-base;
            height: 100upx;
        }
        .price {
            font-size: 44upx;
            color: $base-color;
            &:before {
                content: '￥';
                font-size: 34upx;
            }
        }
        .tips {
            font-size: 24upx;
            color: $font-color-light;
            line-height: 60upx;
            padding-left: 30upx;
        }
        .circle {
            position: absolute;
            left: -6upx;
            bottom: -10upx;
            z-index: 10;
            width: 20upx;
            height: 20upx;
            background: #f3f3f3;
            border-radius: 100px;
            &.r {
                left: auto;
                right: -6upx;
            }
        }
    }
    /* 分类推荐楼层 */
    .hot-floor {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20upx;
        .floor-img-box {
            width: 100%;
            height: 220upx;
            position: relative;
            display: flex;
            &:after {
                padding: 10 30upx;
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
            }
        }
        .name {
            font-size: 30upx;
            color: $font-color-base;
            margin-left: 24upx;
        }
        .floor-img {
            width: 100%;
            height: 100%;
        }
        .floor-list {
            white-space: nowrap;
            padding: 20upx;
            padding-right: 50upx;
            border-radius: 6upx;
            margin-top: -140upx;
            margin-left: 30upx;
            background: #fff;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 1;
        }
        .scoll-wrapper {
            display: flex;
            align-items: flex-start;
        }
        .floor-item {
            width: 180upx;
            margin-right: 20upx;
            font-size: $font-sm + 2upx;
            color: $font-color-dark;
            line-height: 1.8;
            image {
                width: 180upx;
                height: 180upx;
                border-radius: 6upx;
            }
            .price {
                color: $uni-color-primary;
            }
        }
        .more {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            flex-shrink: 0;
            width: 180upx;
            height: 180upx;
            border-radius: 6upx;
            background: #f3f3f3;
            font-size: $font-base;
            color: $font-color-light;
            text:first-child {
                margin-bottom: 4upx;
            }
        }
    }
</style>
